<template>
	<!-- 维修管理/电梯维修 -->
	<div class="operationBox heightMax publicbox planBox" v-loading='loading'>
		<el-row :gutter="10">
			<el-col :span="4">
				<div class="colItem">
					<span class="font14 searchCode">注册代码：</span>
					<el-input size="mini" @keyup.enter.native="find" placeholder="请输入设备注册代码" clearable v-model="marketingCode"></el-input>
				</div>
			</el-col>
			<el-col :span="4">
				<div class="colItem">
					<span class="font14 searchCode">工单状态：</span>
					<el-select v-model="mainType" placeholder="请选择维修工单状态" size="mini" clearable>
						<el-option v-for="item in mainTypeArr" :label="item.label" :value="item.value" :key='item.value'></el-option>
					</el-select>
				</div>
			</el-col>
			<el-col :span="4">
				<div class="colItem">
					<span class="font14 searchCode">开始时间：</span>
					<el-date-picker v-model="timeStart" type="date" format='yyyy-MM-dd' value-format='yyyy-MM-dd' placeholder="选择开始日期"
					 size="mini" @change="changeTime">
					</el-date-picker>
				</div>
			</el-col>
			<el-col :span="4">
				<div class="colItem">
					<span class="font14 searchCode">结束时间：</span>
					<el-date-picker v-model="timeEnd" type="date" format='yyyy-MM-dd' value-format='yyyy-MM-dd' placeholder="选择结束日期"
					 size="mini" :disabled="disAbleTime" :picker-options="pickerOptions">
					</el-date-picker>
				</div>
			</el-col>
			<el-col :span="1.5">
				<div v-if="showVis">
					<el-popover placement="bottom" width="400" v-model="showProp" trigger="manual">
						<el-row :gutter="10" class='currentRow1'>
							<el-col :offset='1'>
								<el-select size="mini" placeholder="时间状态" clearable v-model="timeStatus">
									<el-option v-for="item in timeStatusArr" :value="item.value" :key="item.value" :label="item.label"></el-option>
								</el-select>
							</el-col>
						</el-row>
						<el-row :gutter="10" class='currentRow1'>
							<el-col :offset='1'>
								<el-select size="mini" placeholder="关注" clearable v-model="attentionStatus">
									<el-option v-for="item in attentionStatusArr" :value="item.value" :key="item.value" :label="item.label"></el-option>
								</el-select>
							</el-col>
						</el-row>
						<div class="btnBox">
							<el-button type="primary" size="mini" @click="find">确定</el-button>
							<el-button size="mini" @click="closeVis">关闭</el-button>
						</div>
					</el-popover>
				</div>
				<el-button :type="btnType" class='btnMargin' @click='showVis = true' size="mini">更多查询条件</el-button>
			</el-col>
			<el-button type="primary" icon="el-icon-search" size="mini" class='fl' @click='find'>搜索</el-button>
			<el-button icon="el-icon-delete" @click='reset' class='fl' size="mini">重置</el-button>
		</el-row>
		<!-- 	<div class="listName">
			<i></i><span class="font14">电梯大修列表</span>
		</div> -->
		<el-row :gutter="10">
			<el-col :span="1.5">
				<el-button type="primary" :disabled="disableBtn || compileBtn " @click='newAdd(2)' v-if="complieBtnShow" size="mini">编辑</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="success" :disabled="disableBtn   " @click='newAdd(3)' v-if="readDataShow" size="mini">详情</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" :disabled="disableBtn   " @click='remove(1)' v-if="deleteBtnShow" size="mini">删除</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="danger" :disabled="disableBtnAll   " @click='remove(2)' v-if="deleteBtnShow" size="mini">批量删除</el-button>
			</el-col>
			<div class="fr">
				<el-button type="primary" @click='goOutServe' v-if="readDataShow" size="mini">导出</el-button>
				<el-button type="success" @click='newAdd(1)' v-if="addBtnShow" size="mini">新建</el-button>
			</div>
		</el-row>
		<div class="tableBox">
			<vueScroll>
				<el-table :data="tableData" highlight-current-row ref="moviesTable" @row-click="rowClick" @select-all="selectChange"
				 @selection-change="selectChange" style="width: 100%" border header-row-class-name='tableHeader'>
					<el-table-column type="index" class="over" fixed>
					</el-table-column>
					<el-table-column type="selection" min-width="50" fixed>
					</el-table-column>
					<el-table-column label="电梯注册号" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.register_code" placement="top">
								<span class="speSpan">{{scope.row.register_code}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="状态" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.statusName" placement="top">
								<span class="speSpan">{{scope.row.statusName}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="维保单位" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.maintain_company_name" placement="top">
								<span class="speSpan">{{scope.row.maintain_company_name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="使用单位" max-width="120">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.property_company_name" placement="top">
								<span class="speSpan">{{scope.row.property_company_name}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="维修项目" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.repair_contentName" placement="top">
								<span class="speSpan">{{scope.row.repair_contentName}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="维修人员" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.notify_person" placement="top">
								<span class="speSpan">{{scope.row.notify_person}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="创建者名称" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.create_by_user" placement="top">
								<span class="speSpan">{{scope.row.create_by_user}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="计划开始时间" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.start_planning_time" placement="top">
								<span class="speSpan">{{scope.row.start_planning_time}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="计划完成时间" max-width="140">
						<template slot-scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.end_planning_time" placement="top">
								<span class="speSpan">{{scope.row.end_planning_time}}</span>
							</el-tooltip>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页器 -->
				<div class="pag">
					<el-pagination :current-page="page" :page-sizes="[10, 20, 30, 40]" :page-size="page_size" layout="total, sizes, prev, pager, next, jumper"
					 :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange">
					</el-pagination>
				</div>
			</vueScroll>
		</div>
		<addAndCompile v-if='addAndCompileShow' :addAndCompileShow='addAndCompileShow' :statusName='statusName' :title='title'
		 :rowId='rowId' @closeMask='closeMask'></addAndCompile>
	</div>
</template>

<script>
	import addAndCompile from "./addAndCompile.vue"
	import {
		loadFn,
		axiosPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		moment
	} from "@/common.js";
	export default {
		activated() {
			if (!this.newFlag) {
				this.firstMethods()
			}
		},
		mounted() {
			this.firstMethods()
			this.getTableList()
			this.getPermition()
		},
		components: {
			addAndCompile,
		},
		data() {
			return {
				btnType: 'primary',
				showVis: false,
				attentionStatus: '',
				attentionStatusArr: [{
					label: '我的关注',
					value: 1
				}, {
					label: '其他',
					value: 0
				},{
					label:'全部',
					value:2
				}],
				showProp: true,
				marketingCode: '',
				tableData: [],
				page: 1,
				page_size: 10,
				total: 0,
				loading: true,
				timeStart: '',
				timeEnd: '',
				query: '',
				addAndCompileShow: false,
				title: '新建电梯维修',
				disableBtn: true,
				checkBoxArr: [],
				rowId: 0,
				mainType: '',
				mainTypeArr: [{
						value: 0,
						label: '报修'
					},
					{
						value: 1,
						label: '报警待指派'
					},
					{
						value: 10,
						label: '已创建'
					},
					{
						value: 20,
						label: '已确认'
					},
					{
						value: 30,
						label: '已退回'
					},
					{
						value: 40,
						label: '到达现场'
					},
					{
						value: 50,
						label: '维修完成'
					},
					{
						value: 60,
						label: '问题消除'
					}, {
						value: 70,
						label: '已完成'
					}
				],
				statusName: 0,
				compileBtn: true,
				pidsArr: [],
				addBtnShow: false,
				complieBtnShow: false,
				deleteBtnShow: false,
				readDataShow: false,
				disableBtnAll: true,
				newFlag: true,
				timeStatus: '',
				timeStatusArr: [{
						label: '已过期',
						value: 10
					}, {
						label: '即将过期',
						value: 20
					},
					{
						label: '待维修',
						value: 40
					}
				],
				today: ''
			}
		},
		computed: {
			disAbleTime() {
				if (this.timeStart) {
					return false
				} else {
					return true
				}
			},
			pickerOptions() {
				return {
					disabledDate: (time) => {
						return time.getTime() < moment(this.timeStart)
					}
				}
			},
			xiuArr() {
				if (localStorage.weiXiu) {
					let arr = JSON.parse(localStorage.weiXiu).list
					return arr.filter((item) => {
						return item.name == '普通维修'
					})
				} else {
					return []
				}
			}
		},
		methods: {
			closeVis() {
				this.showVis = false
				if (this.timeStatus || this.attentionStatus || this.attentionStatus === 0) {
					this.btnType = 'warning'
				} else {
					this.btnType = 'primary'
				}
			},
			pubLickSearch() {
				if (this.timeStatus || this.attentionStatus || this.attentionStatus === 0) {
					this.btnType = 'warning'
					this.showVis = true
				} else {
					this.btnType = 'primary'
					this.showVis = false
				}
			},
			firstMethods() {
				if (localStorage.searchLiftService) {
					this.attentionStatus = ''
					this.today = ''
					this.timeStatus = ''
					this.page = 1
					this.page_size = 10
					this.query = ''
					this.marketingCode = ''
					this.mainType = ''
					this.timeStart = ''
					this.timeEnd = ''
					let id = JSON.parse(localStorage.searchLiftService).id
					if (id == 4) {
						this.timeStatus = 40
					} else if (id == 5) {
						this.timeStatus = 20
					} else if (id == 6) {
						this.timeStatus = 10
					} else if (id == 3) {
						this.today = 1
					} else if (id == 7) {
						this.attentionStatus = 1
					}
					localStorage.removeItem('searchLiftService')
					setTimeout(() => {
						this.getTableList()
					}, 100)
				}
				this.pubLickSearch()

			},
			getPermition() {
				if (this.xiuArr.length != 0) {
					if (this.xiuArr[0].pids) {
						this.pidsArr = this.xiuArr[0].pids
					}
				}
				if (this.pidsArr.length > 0) {
					this.pidsArr.map((item) => {
						if (item.desc == 'get') {
							this.readDataShow = true
						}
						if (item.desc == 'put') {
							this.complieBtnShow = true
						}
						if (item.desc == 'delete') {
							this.deleteBtnShow = true
						}
						if (item.desc == 'post') {
							this.addBtnShow = true
						}
					})
				}
			},
			remove(val) {
				this.$confirm('此操作将永久删除该维修, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let url = ''
					let data = {

					}
					let arr = this.checkBoxArr.map((item) => {
						return item.id
					})
					console.log(arr)
					if (val == 1) {
						url = '/manu/elevator/repair/' + this.rowId

					} else {
						url = '/manu/elevator/repair/'
						data = {
							ids: arr
						}
					}
					axiosDelete(url, data, (res) => {
						if (res.code == 0) {
							this.$message.success('删除成功')
							this.getTableList()
						} else {
							this.$message.error(res.detail.result)
						}
					})
				}).catch(() => {

				});
			},
			//开始时间变化
			changeTime() {
				this.timeEnd = ''
			},
			//新建一个大修
			newAdd(value) {
				this.addAndCompileShow = true
				if (value == 1) {
					this.title = '新建电梯维修'
				} else if (value == 2) {
					this.title = '编辑电梯维修'
				} else {
					this.title = '电梯维修详情'
				}
			},
			//关闭添加弹窗
			closeMask(value) {
				this.addAndCompileShow = false
				if (value == 2) {
					this.getTableList()
				}
			},
			//获取表格数据
			getTableList() {
				this.pubLickSearch()
				this.showVis = false
				this.loading = true
				if(this.attentionStatus == 2){
					this.attentionStatus = ''
				}
				let params = {
					page: this.page,
					page_size_count: this.page_size,
					register_code: this.marketingCode,
					maintenance_type: 0,
					time_from: this.timeStart ? this.timeStart : '',
					time_to: this.timeEnd ? this.timeEnd : '',
					status: this.mainType,
					time_status: this.timeStatus,
					today: this.today,
					follow: this.attentionStatus
				}
				axiosGet('/manu/elevator/repair/', params, (res) => {
					this.loading = false
					this.newFlag = false
					if (res.code == 0) {
						this.total = res.detail.count
						this.tableData = res.detail.results
						this.tableData.map((item) => {
							item.repair_contentName = item.repair_content.map((item) => {
								return item.repair_type_name
							}).join(',')
							if (item.status == 10) {
								item.statusName = '已创建'
							}else if (item.status == 1) {
								item.statusName = '报警待指派'
							}else if (item.status == 20) {
								item.statusName = '已确认'
							} else if (item.status == 30) {
								item.statusName = '已退回'
							} else if (item.status == 40) {
								item.statusName = '到达现场'
							} else if (item.status == 50) {
								item.statusName = '维修完成'
							} else if (item.status == 60) {
								item.statusName = '问题消除'
							} else if (item.status == 70) {
								item.statusName = '已完成'
							} else {
								item.statusName = '报修'
							}
							return item
						})
						// console.log(this.tableData)
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			find() {
				this.page = 1
				this.page_size = 10
				this.getTableList()
			},
			reset() {
				this.showVis = false
				this.attentionStatus = ''
				this.today = ''
				this.timeStatus = ''
				this.page = 1
				this.page_size = 10
				this.query = ''
				this.marketingCode = ''
				this.mainType = ''
				this.timeStart = ''
				this.timeEnd = ''
				this.getTableList()
			},
			//表格
			rowClick(row, column, event) {
				this.$refs.moviesTable.toggleRowSelection(row)
			},
			selectChange(res) {
				console.log(res)
				if (res.length == 1) {
					this.disableBtn = false
					this.rowId = res[0].id
					this.statusName = res[0].status
					if (this.statusName < 40) {
						this.compileBtn = false
					} else {
						this.compileBtn = true
					}
					// this.rowId = 37
				} else {
					this.disableBtn = true
				}
				if (res.length > 1) {
					this.disableBtnAll = false
				} else {
					this.disableBtnAll = true
				}
				this.checkBoxArr = res
			},
			//分页器
			handleSizeChange(size) {
				this.page_size = size
				this.getTableList()
			},
			handleCurrentChange(page) {
				this.page = page
				this.getTableList()
			},
			//导出
			goOutServe() {
				this.$confirm('此操作将导出所有维修信息, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					window.open('http://www.africle.xyz:8088/api/v1/manu/elevator/repair/download/')
				}).catch(() => {})
			}

		},
	}
</script>

<style scoped lang="less">
	.colItem {
		display: flex;
		flex-direction: row;

		.searchCode {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 120px;
		}
	}

	.tableBox {
		height: 80%;
		overflow-y: auto;
	}

	.listName {
		display: flex;
		justify-content: flex-start;
		text-align: left;
		height: 25px;
		align-items: center;

		i {
			width: 3px;
			height: 60%;
			background: #2d8cf0;
			margin: 10px 5px;
		}

	}
</style>
